<!--
 * @Description:
 * @Author: zhaolei
 * @Date: 2023-04-10 18:16:02
-->
<template>
  <el-dialog
    title="查看宠物详情"
    :visible.sync="visible"
    width="80%"
    append-to-body
  >
    <commonForm
      v-if="visible"
      :id="id"
      ref="commonForm"
      action="view"
    ></commonForm>
    <el-tabs v-model="activeName">
      <el-tab-pane
        label="上架信息"
        name="first"
      >
        <putAwayTab
          v-if="visible"
          :id="id"
          :status="status"
        ></putAwayTab>
      </el-tab-pane>
      <el-tab-pane
        label="预约记录"
        name="third"
      >
        <appointmentTab
          v-if="visible"
          :pet-id="id"
        ></appointmentTab>
      </el-tab-pane>
      <el-tab-pane
        label="投喂记录"
        name="feed"
      >
        <feed-tab
          v-if="visible"
          :id="id"
        ></feed-tab>
      </el-tab-pane>
      <el-tab-pane
        label="捐赠记录"
        name="donate"
      >
        <donate-tab
          v-if="visible"
          :id="id"
          :type="DONATE_TYPE.ORDER"
        ></donate-tab>
      </el-tab-pane>
      <el-tab-pane
        label="溯源记录"
        name="second"
      >
        <traceTab
          v-if="visible"
          :id="id"
        ></traceTab>
      </el-tab-pane>

      <el-tab-pane
        label="领养记录"
        name="fourth"
      >
        <adoptionTab
          v-if="visible"
          :id="id"
        ></adoptionTab>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex';
import { tableOption } from '@/const/crud/pet/detail';
import traceTab from './traceTab.vue';
import commonForm from './commonForm.vue';
import putAwayTab from './putAwayTab.vue';
import appointmentTab from './appointmentTab.vue';
import adoptionTab from './adoptionTab.vue';
import donateTab from './donateTab.vue';
import feedTab from './feedTab.vue';
import { DONATE_TYPE } from '@/const/type';

export default {
  name: 'detailPopup',
  components: {
    traceTab,
    commonForm,
    putAwayTab,
    appointmentTab,
    adoptionTab,
    donateTab,
    feedTab,
  },
  props: {
    id: {
      type: [Object, String],
    },
    value: {
      type: Boolean,
      default: false,
    },
    dataObj: { type: [Object] },
    status: { type: String },
  },
  data() {
    return {
      form: {},
      DONATE_TYPE,
      loading: false,
      tableOption: tableOption(),
      activeName: 'first',
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
    ...mapGetters(['userInfo', 'access_token']),
  },
  watch: {
    visible() {
      this.form = { ...this.dataObj };
      this.form.birthDay = this.form.birthDay || '未知';
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped></style>
